<template>
  <div>
    <section>
      <div class="rank-section">
        <div class="rank-section-cover">
          <img v-lazy="artistToplist.coverUrl" :alt="artistToplist.name">
          <div class="meta">{{artistToplist.updateFrequency}}</div>
        </div>
        <ol class="rank-section-list">
          <li v-for="artist in artistToplist.artists" :key="artist.id">
            <span class="name">{{artist.first}}</span>
            <span class="hot"><i class="fa fa-fire"></i> {{artist.third}}</span>   
          </li>
        </ol>
      </div>
      <div class="rank-section">
        <div class="rank-section-cover">
          <img v-lazy="list.coverImgUrl" :alt="list.name">
          <div class="meta">{{list.updateFrequency}}</div>
        </div>
        <ol class="rank-section-list">
          <li v-for="item in list.tracks" :key="item.id">
            <span class="name">{{item.first}} - {{item.second}}</span>
          </li>
        </ol>
      </div>
      <div class="rank-section">
        <div class="rank-section-cover">
          <img v-lazy="rewardToplist.coverUrl" :alt="rewardToplist.name">
          <div class="meta">实时更新</div>
        </div>
        <ol class="rank-section-list">
          <li v-for="item in rewardToplist.songs" :key="item.id">
            <span class="name">{{item.name}} - {{item.artists | formatArtists}}</span>
          </li>
        </ol>
      </div>
      <div class="rank-section">
        <div class="rank-section-cover">
          <img v-lazy="idx0Playlist.coverImgUrl" :alt="idx0Playlist.name">
          <div class="meta">实时更新</div>
        </div>
        <ol class="rank-section-list">
          <li v-for="item in idx0Playlist.tracks" :key="item.id">
            <span class="name">{{item.name}} - {{item.ar | formatArtists}}</span>
          </li>
        </ol>
      </div>
      <div class="rank-section">
        <div class="rank-section-cover">
          <img v-lazy="idx2Playlist.coverImgUrl" :alt="idx2Playlist.name">
          <div class="meta">实时更新</div>
        </div>
        <ol class="rank-section-list">
          <li v-for="item in idx2Playlist.tracks" :key="item.id">
            <span class="name">{{item.name}} - {{item.ar | formatArtists}}</span>
          </li>
        </ol>
      </div>
      <div class="rank-section">
        <div class="rank-section-cover">
          <img v-lazy="idx1Playlist.coverImgUrl" :alt="idx1Playlist.name">
          <div class="meta">实时更新</div>
        </div>
        <ol class="rank-section-list">
          <li v-for="item in idx1Playlist.tracks" :key="item.id">
            <span class="name">{{item.name}} - {{item.ar | formatArtists}}</span>
          </li>
        </ol>
      </div>
    </section>
  </div>
</template>
<script>
import { getOfficialRank } from "@/api/rank";
export default {
  name: "Rank",
  data() {
    return {
      artistToplist: {},
      list: {},
      rewardToplist: {},
      idx0Playlist: {},
      idx2Playlist: {},
      idx1Playlist: {}
    };
  },
  created() {
    this.getRank();
  },
  methods: {
    getRank() {
      getOfficialRank().then(
        this.axios.spread((detail, idx0, idx2, idx1) => {
          if (detail.status == 200) {
            this.artistToplist = detail.data.artistToplist;
            this.list = detail.data.list[0];
            this.rewardToplist = detail.data.rewardToplist;
          }
          if (idx0.status == 200){
            idx0.data.playlist.tracks.splice(3)
            this.idx0Playlist = idx0.data.playlist
          }
          if (idx2.status == 200){
            idx2.data.playlist.tracks.splice(3)
            this.idx2Playlist = idx2.data.playlist
          }
          if (idx1.status == 200){
            idx1.data.playlist.tracks.splice(3)
            this.idx1Playlist = idx1.data.playlist
          }
        })
      );
    }
  },
  filters: {
    formatArtists: artists => {
      const name = artists.map(item => {
        return item.name
      });
      return name.join('/')
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./../../assets/scss/variable";
@import "./style.scss";
</style>
